<template>
  <div id="app" class="studentReportSemester">
    <sk-table-header ref="skTableHeader" @dataFrom="getDataFrom" @export="handleDownload"></sk-table-header>
  
    <a-card :bordered="false" id="reportArea">
      <div class="ant-card-head-wrapper">
        <div class="ant-card-head-title">
          {{ monthName }}-{{className}}-数据报告
        </div>
        <!-- <div class="ant-card-extra">
          <a slot="extra" @click="handleDownload">导出<a-icon type="download" /></a>
        </div> -->
      </div>
      <a-spin tip="正在导出..." :spinning="spinning">
        <a-collapse v-model="activeKey">
          <a-collapse-panel key="1" header="1. 幼儿考勤分析">
            <attendance ref="attendanceRef" :dataForm="dataForm" :monthName="monthName" :className="className" v-if="showView['1']" @ok="handleOk"></attendance>
          </a-collapse-panel>
          <a-collapse-panel key="2" header="2. 幼儿运动分析">
            <sport ref="sportRef" :dataForm="dataForm" :monthName="monthName" :className="className" v-if="showView['2']" @ok="handleOk"></sport>
          </a-collapse-panel>
          <a-collapse-panel key="3" header="3. 幼儿保健数据分析">
            <temp ref="tempRef" :dataForm="dataForm" :monthName="monthName" :className="className" v-if="showView['3']" @ok="handleOk"></temp>
            <bmi ref="bmiRef" :dataForm="dataForm" :monthName="monthName" :className="className" v-if="showView['3']" @ok="handleOk"></bmi>
          </a-collapse-panel>
          <a-collapse-panel key="4" header="4. 幼儿生活数据分析">
            <life ref="lifeRef" :dataForm="dataForm" :monthName="monthName" :className="className" v-if="showView['4']" @ok="handleOk"></life>
            <sleep ref="sleepRef" :dataForm="dataForm" :monthName="monthName" :className="className" v-if="showView['4']" @ok="handleOk"></sleep>
          </a-collapse-panel>
          <a-collapse-panel key="5" header="5. 幼儿区域数据分析">
            <like-area ref="areaRef" :dataForm="dataForm" :monthName="monthName" :className="className" v-if="showView['5']" @ok="handleOk"></like-area>
          </a-collapse-panel>
          <!-- <a-collapse-panel key="6" header="6. 幼儿记录数据分析">
          </a-collapse-panel> -->
          <a-collapse-panel key="6" header="6. 幼儿评价数据分析">
            <evaluation ref="evaluation" :dataForm="dataForm" :monthName="monthName" :className="className" v-if="showView['6']" @ok="handleOk"></evaluation>
          </a-collapse-panel>
        </a-collapse>
      </a-spin>
    </a-card>
  </div>
</template>
<script>

import skTableHeader from './month/skTableHeader'
import attendance from './month/attendance'
import sport from './month/sport'
import temp from './month/temp'
import life from './month/life'
import bmi from './month/bmi'
import sleep from './month/sleep'
import likeArea from './month/likeArea'
import html2canvas from "html2canvas" //网页转换为图片
import evaluation from "./month/evaluation";
export default
{
  name: 'studentReportSemester',
  data() {
    return {
      activeKey:['1'],
      showView: {
        '1':false,
        '2':false,
        '3':false,
        '4':false,
        '5':false,
        '6':false
      },
      dataForm: {
      },
      monthName: '',
      className: '全园',
      stuName: '',
      elements:[],
      exportList:[],
      exportFlag:false,
      spinning:false,
    }
  },
  props:[],
  components: {
    skTableHeader,
    attendance,
    sleep,
    temp,
    life,
    bmi,
    sport,
    likeArea,
    evaluation
  },
  filters: {},
  
  computed: {},
  
  created() {
  },
  
  activated() {
  },
  
  watch: {
    activeKey(key) {
      const lastKey = this.activeKey[this.activeKey.length-1]
      this.showView[lastKey] = true
    },
  },
  mounted() {
  },

  methods: {
    // 获取参数
    getDataFrom(dataForm){
      console.log('dataForm', dataForm);
      this.dataForm = dataForm
      this.monthName = dataForm.monthValue
      this.stuName = dataForm.stuName ? dataForm.stuName : ''
      if (dataForm.classId != '') {
        const c = dataForm.classList.find(c => c.id == dataForm.classId)
        this.className = (c ? c.className : '全园') + ' ' + this.stuName + ' '
      } else {
        this.className = '全园' + ' ' + this.stuName
      }
      this.showActiveKey();
    },
    showActiveKey(){
      this.showView['1'] = this.activeKey.findIndex(key => key == '1') > -1
      this.showView['2'] = this.activeKey.findIndex(key => key == '2') > -1
      this.showView['3'] = this.activeKey.findIndex(key => key == '3') > -1
      this.showView['4'] = this.activeKey.findIndex(key => key == '4') > -1
      this.showView['5'] = this.activeKey.findIndex(key => key == '5') > -1
      this.showView['6'] = this.activeKey.findIndex(key => key == '6') > -1
      this.$nextTick(()=>{
        this.activeKey.forEach(key => {
          switch(key){
            case '1':
              this.$refs.attendanceRef.load();
              break;
            case '2':
              this.$refs.sportRef.load();
              break;
            case '3':
              this.$refs.tempRef.load();
              this.$refs.bmiRef.load();
              break;
            case '4':
              this.$refs.lifeRef.load();
              this.$refs.sleepRef.load();
              break;
            case '5':
              this.$refs.areaRef.load();
              break;
            case '6':
              this.$refs.evaluation.load();
              break;
          }
        })
      })
    },
    // 导出
    handleDownload() {
      // 转换成canvas
      this.exportFlag = true;
      this.spinning = true;
      this.exportList = []
      this.activeKey.push("1","2","3","4","5","6","7")
      this.showActiveKey();
    },
    handleOk(){
      this.exportList.push(true);
      if (this.exportFlag && this.exportList.length == this.activeKey.length) {
        this.spinning = false;
        setTimeout(() => {
          this.exportPng();
        }, 500);
      }
    },
    exportPng(){
      let that = this;
      html2canvas(document.getElementById("reportArea")).then(function (canvas) {
        var img = canvas
          .toDataURL("image/png")
          .replace("image/png", "image/octet-stream");
        // 创建a标签，实现下载
        var creatIMg = document.createElement("a");
        creatIMg.download = that.dataForm.semester.semesterName + that.className+ (that.dataForm.stuName?that.dataForm.stuName:"") + "数据报告.png"; // 设置下载的文件名，
        creatIMg.href = img; // 下载url
        document.body.appendChild(creatIMg);
        creatIMg.click();
        creatIMg.remove(); // 下载之后把创建的元素删除
        that.activeKey = ["1"];
        
      });
    }
  }
}
</script>
<style scoped lang="less">
  /deep/ .ant-card-body{
    padding: 10px;

    .ant-card-head-title {
      font-size: 18px;
      font-weight: 600;
    }
  }
</style>